'use strict'
import React from 'react'
import style from './css.css'
import Toast from './toast'

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            luckBless: [
                {
                    num: '1',
                    getBless: ['6元优惠券', '随机10-100金币'],
                    isGet: serverData.receiveState[0]
                },
                {
                    num: '3',
                    getBless: ['18元优惠券', '随机100-300金币'],
                    isGet: serverData.receiveState[1]
                },
                {
                    num: '6',
                    getBless: ['免邮券', '18元优惠券', '随机300-600金币'],
                    isGet: serverData.receiveState[2]
                },
                {
                    num: '10',
                    getBless: ['免邮券', '18元优惠券', '随机600-1000金币', '1.6米粉红豹或任意3款娃娃大礼包'],
                    isGet: serverData.receiveState[3]
                },
            ],
            filling: [
                { num: '累计充值6元' },
                { num: '累计充值36元' },
                { num: '累计充值280元' },
                { num: '累计充值680元' },
                { num: '累计充值1280元' },
            ],
            play: [
                { num: '上机1局' },
                { num: '累计上机10局' },
                { num: '累计上机30局' },
                { num: '累计上机50局' },
                { num: '累计上机80局' },
            ],
            toastShow:false
        }
    }
    componentDidMount() {

    }
    transferMsg(msg,toast) {
        this.setState({
            luckBless: msg,
            toastShow:toast
        });
    }
    render() {
        return (
            <div className={style.all}>
                <div className={style.box}>
                    <div className={style.banner}>
                        <span>3月2日-3月7日</span>
                    </div>
                    <div className={style.activeState}>
                        <div className={style.stateTitle}></div>
                        <div className={style.stateText}>
                            <div>活动期间，<i>每天</i>只要达成不同的游戏目标，就可以获得相应的好运福袋</div>
                            <div><i>好运福袋</i>一共有4个，每天只要分别累计完成1、3、6、10个游戏任务目标，就能分别开启对应的福袋，获得丰厚奖励。<i>福袋</i>里有1.6米粉红豹大玩偶、线上任意3款娃娃大礼包、随机金币奖励、免邮券、充值优惠券等超值奖品哦！</div>
                            <div>充值优惠券不适用周卡、月卡</div>
                            <div>免邮券、充值优惠券：实时发放，有效期截止时间为发放后隔天24点</div>
                            <div>实体奖品的发放：3月8日起7个工作日内发货</div>
                            <div>每天的游戏任务目标完成情况，会在每天0点清零重新统计计算</div>
                        </div>
                        <div className={`${style.stateTitle} ${style.stateTitle2}`}></div>
                        <GoodBless luckBless={this.state.luckBless}
                            toast={this.state.toastShow}
                            transferMsg={msg => this.transferMsg(msg)}
                        />

                        <div className={style.stateTitle3}></div>
                        <div className={style.goPlay}>
                            <FillingList filling={this.state.filling} />
                            <PlayList play={this.state.play} />
                        </div>
                    </div>
                    <div className={style.state}>本平台保留对本活动的最终解释权</div>
                </div>
                <Toast isShow={this.state.toastShow}/>
            </div>
        )
    }
}
function PlayList(props) {
    const filling = props.play;
    const isFinish = serverData.play;

    function _handleClick(index) {
        // console.log(index);
        if (serverData.islogin) {
            var json = { method: 'close' }
            var jsonString = JSON.stringify(json)
            prompt('__native_call=>' + jsonString)
        } else {
            window.location.href = serverData.download
            return;
        }
    }

    const list = filling.map((item, index) =>
        <div className={`${style.filling} ${style.play} ${isFinish[index].isPlay ? style.playGet : ''}`}
            key={index}
            onClick={(e) => _handleClick(index)}>
            <div className={style.listIcon}></div>
            <span className={style.fontWeight}>{item.num}</span>
            <span>{isFinish[index].isPlay ? '已完成' : '去完成 >'}</span>
        </div>
    )
    return (
        <div className={`${style.fillingList} ${style.playList}`}>
            {list}
        </div>
    )
}

function FillingList(props) {
    const filling = props.filling;
    const isFinish = serverData.filling;
    // console.log(isFinish)

    function handleClick(index) {
        // console.log(index);
        if (serverData.islogin) {
            prompt('__native_call=>' + JSON.stringify({
                method: 'reqNative',
                modul: 'charge',
                action: 'charge'
            }))
        } else {
            window.location.href = serverData.download
            return;
        }
    }


    const list = filling.map((item, index) =>
        <div className={`${style.filling} ${isFinish[index].isFinish ? style.fillingGet : ''}`}
            key={index}
            onClick={(e) => handleClick(index)}
        >
            <div className={style.listIcon}></div>
            <span className={style.fontWeight}>{item.num}</span>
            <span>{isFinish[index].isFinish ? '已完成' : '去完成 >'}</span>
        </div>)
    return (
        <div className={style.fillingList}>
            {list}
        </div>
    )
}

function GoodBless(props) {
    let data = props.luckBless;
    
    function getGoodBless(num, isGet, i) {
        let _data = props.luckBless
        let toast = props.toast;
        console.log(toast)
        const url = `/v1/activity/doll/2018yuanxiao/activity${window.location.search}&missioncnt=${num}`
        if (serverData.islogin) {
            if (isGet == 2) {
                _data[i].isGet = 1;
                toast=true;
                console.log(toast)
                props.transferMsg(_data,toast)
                fetch(url, {method: 'POST'}) 
                .then(res =>{
                    _data[i].isGet = 1;
                    props.transferMsg(_data,toast)

                    console.log('err'+res.err)
                    console.log('err1'+res.data.err)
                    if(res.err==0){
                        console.log('err0')
                    }
                    if(res.err=='0'){
                        console.log('err1')
                    }
                  })
                  .catch(err =>{console.log(err)})
            }
        } else {
            window.location.href = serverData.download
            return;
        }
    }

    const list = data.map((item, index) =>
        <div className={style.goodBless}
            key={index}>
            <div className={`${style.blessIcon} ${item.isGet == 2 ? style.swing : ''}`}></div>
            <div className={style.inside}>
                <div className={style.leftRegion}>
                    <span>{index == 0 ? '完成任意' : '累计完成'} <i>{item.num}</i> 个游戏目标</span>
                    <span>{item.getBless[0]}</span>
                    <span>{item.getBless[1]}</span>
                    <span>{item.getBless[2]}</span>
                    <span>{item.getBless[3]}</span>
                </div>
                <div className={`${style.rightRegion} ${item.isGet == 0 ? style.rightRegion2 : item.isGet == 2 ? style.rightRegion1 : ''}`}
                    onClick={(e) => getGoodBless(item.num, item.isGet, index)}
                >{item.isGet == 1 ? '已领取' : '领取奖励'}</div>
            </div>
        </div>
    )
    return (<div className={style.blessList}>
        {list}
    </div>)
}

export default App
